<template>
  <div class="Count">
    <ScreenTitle v-model:title-value="titleValue"> </ScreenTitle>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script lang="ts" setup name="Count">
import { onMounted, ref, inject } from 'vue'
const charts = ref()

let titleValue = ref('数据统计')
const initEchartsOneFn = () => {
  // echarts初始化
  const Echarts = inject('$echarts')

  let myChart = (Echarts as any).init(charts.value)
  // 或
  // let myChart = proxy.$echarts.init(container.value);
  const option = {
    //标题组件
    title: {
      text: '客户消费统计',
      left: '0',
      textStyle: {
        color: '#FFF'
      },
      subtextStyle: {
        color: '#5edc63'
      }
    },
    legend: {
      data: ['Allocated Budget', 'Actual Spending']
    },
    /* 设置我们雷达图各个阶段的值的大小 */
    radar: {
      // shape: 'circle',
      indicator: [
        { name: '消费', max: 6500 },
        { name: '好感', max: 16000 },
        { name: '出行', max: 30000 },
        { name: '小吃', max: 38000 },
        { name: '爱好', max: 52000 },
        { name: '景点', max: 25000 }
      ]
    },
    /* 设置其我们视图的各个属性的值与设定我们图形的类型 */
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',
        data: [
          {
            value: [4200, 3000, 20000, 35000, 50000, 18000]
          },
          {
            value: [5000, 14000, 28000, 26000, 42000, 21000]
          }
        ]
      }
    ]
  }

  myChart.setOption(option)
}
onMounted(() => {
  initEchartsOneFn()
})
</script>

<style scoped>
.Count {
  margin: 10px;
  background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  .charts {
    height: 100%;
  }
}
</style>
